<template>
  <div
    style="width: 100%; height: 64vh; display: flex; justify-content: center"
  >
    <div style="width: 100%">
      <el-descriptions
        :title="data?.taskName + '物模型'"
        :border="true"
        :column="2"
        label-width="20%"
      >
        <template #extra>
          <el-button :icon="thingModel.flag ? Edit : Plus" type="primary" @click="openDialog">{{
            thingModel.flag ? "修改" : "新增"
          }}</el-button>
        </template>
        <el-descriptions-item v-if="thingModel.flag" label="设备类型" align="center">
          <div>{{ thingModel.data.deviceType }}</div>
        </el-descriptions-item>

        <el-descriptions-item v-if="thingModel.flag" label="设备型号" align="center">
          <div>{{ thingModel.data.deviceVersion }}</div>
        </el-descriptions-item>
        <el-descriptions-item v-if="thingModel.flag" label="创建时间" align="center">
          <div>{{ thingModel.data.createdAt }}</div>
        </el-descriptions-item>
        <el-descriptions-item v-if="thingModel.flag" label="更新时间" align="center">
          <div>{{ thingModel.data.updatedAt }}</div>
        </el-descriptions-item>
        <el-descriptions-item v-if="thingModel.flag" label="备注" align="center">
          <div>{{ thingModel.data.remark }}</div>
        </el-descriptions-item>
      </el-descriptions>

      <div style="width: 100%" v-if="thingModel.flag" >
        <div style="width: calc(100% - 40px); margin: 20px">
          <span>设备属性</span>
        </div>

        <v-ace-editor
          style="width: 100%; height: 20vh; font-size: 16px; border: 1px solid"
          v-model:value="thingModel.data.deviceProperties"
          lang="json"
          theme="monokai"
          :options="options"
        />
      </div>
    </div>
  </div>

  <el-dialog
    v-model="dialog.show"
    draggable
    width="40vw"
    style="display: flex; flex-direction: column"
  >
    <template #header>
      <h3
        style="
          width: 100%;
          text-align: center;
          margin: 0;
          border: 0;
          padding: 0;
        "
      >
        {{ dialog.title }}
      </h3>
    </template>
    <el-form :model="dialog.form" label-width="120px" ref="dialogForm">
      <el-form-item label="设备类型" prop="deviceType">
        <el-select
          v-model="dialog.form.deviceType"
          placeholder="请输入设备类型"
        >
          <el-option label="GNSS接收机" :value="1" />
        </el-select>
      </el-form-item>

      <el-form-item label="设备型号" prop="deviceVersion">
        <el-input
          v-model="dialog.form.deviceVersion"
          placeholder="请输入设备型号"
        />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          :rows="5"
          v-model="dialog.form.remark"
          placeholder="请输入备注"
        />
      </el-form-item>

      <el-form-item label="设备属性" prop="deviceProperties">
        <v-ace-editor
          style="width: 100%; height: 20vh; font-size: 16px; border: 1px solid"
          v-model:value="dialog.form.deviceProperties"
          lang="json"
          theme="monokai"
          :options="options"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span>
        <el-button @click="dialog.show = false">取消</el-button>
        <el-button type="primary" @click="addOrUpdateThingModel">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  addThingModelAPI,
  getThingModelAPI,
  updateThingModelAPI,
  type ThingModel,
  type ThingModelDTO,
} from "@/api/solutionService";
import type { CollectTask } from "@/model/group";
import { Plus , Edit } from "@element-plus/icons-vue";
import {  ref, watch, reactive } from "vue";
import { VAceEditor } from "vue3-ace-editor";
import "@/assets/aceConfig";
import { Ace } from "ace-builds";
import { ElMessage } from "element-plus";

defineOptions({
  name: "ThingModelView", // 物模型组件
});

const { data } = defineProps<{
  data: CollectTask;
}>();

/** 监听数据变化获取物模型 */
watch(
  () => data,
  () => {
    getThingModel();
  }
);

const options: Partial<Ace.EditorOptions> = reactive({
  useWorker: true, // 启用语法检查,必须为true
  enableBasicAutocompletion: true, // 自动补全
  enableLiveAutocompletion: true, // 智能补全
  enableSnippets: true, // 启用代码段
  showPrintMargin: false, // 去掉灰色的线，printMarginColumn
  highlightActiveLine: true, // 高亮行
  highlightSelectedWord: true, // 高亮选中的字符
  tabSize: 4, // tab锁进字符
  fontSize: 14, // 设置字号
  wrap: false, // 是否换行
  readonly: false, // 是否可编辑
  // minLines: 10, // 最小行数，minLines和maxLines同时设置之后，可以不用给editor再设置高度
  // maxLines: 50, // 最大行数
});


/** 物模型弹窗 */
const dialog = ref<{
  show: boolean;
  title: string;
  loading: boolean;
  form: ThingModelDTO | ThingModel;
}>({
  show: false,
  title: "新增物模型",
  loading: false,
  form: {
    deviceType: 1,
    deviceVersion: "",
    deviceProperties: "",
    remark: "",
    collectTaskId: 0,
  },
});

/** 物模型展示 */
const thingModel = ref({
  data: {
    id: 0,
    createdAt: "",
    updatedAt: "",
    deviceType: 0,
    deviceVersion: "",
    deviceProperties: "",
    remark: "",
    collectTaskId: 0,
  },
  flag: false,
});

/** 获取物模型 */
async function getThingModel() {
  const res = await getThingModelAPI(data.id!);
  if (res.data != null) {
    thingModel.value.data = res.data;
    thingModel.value.flag = true;
  } else {
    thingModel.value.flag = false;
  }
}

/** 打开物模型弹窗 */
function openDialog() {
  dialog.value.show = true;
  // 判断是否有数据 true 有修改 false 没有新增
  if (thingModel.value.flag) {
    dialog.value.title = "修改物模型";
    dialog.value.form = { ...thingModel.value.data};
  } else {
    dialog.value.title = "新增物模型";
    dialog.value.form = {
      deviceType: 1,
      deviceVersion: "",
      deviceProperties: "",
      remark: "",
      collectTaskId: data.id!,
    };
  }
  dialog.value.show = true;
}

/** 新增物模型  */
async function addOrUpdateThingModel() {
  dialog.value.loading = true;
  const fun = thingModel.value.flag ? updateThingModelAPI : addThingModelAPI;
  // @ts-ignore
  const res = await fun(dialog.value.form).finally(() => {
    dialog.value.loading = false;
  });

  // @ts-ignore
  if(res.code === 200) {
    ElMessage.success(thingModel.value.flag ? "修改成功" : "新增成功");  
  }
  getThingModel();
  dialog.value.show = false;
}
</script>

<style scoped></style>
